<!DOCTYPE html>
<html style="width:100%;height:100%;overflow-y:hidden">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<title>我本该活的更好</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<style type="text/css">
			html {
				padding: 0;
				box-sizing: border-box;
			}

			* {
				padding: 0;
				margin: 0;
			}

			.my-title1 {
				position: absolute;
				width: 100vw;
				background: rgba(0, 0, 0, 0);
				text-align: center;
				padding-top: 20px;
				font-size: 20px;
				color: #b8b8b5;

			}

			.content {
				/* display: flex; */
				/* flex-direction: column;
				align-items: center;
				justify-content: center; */
				position: relative;
				height: 100vh;
				width: 100vw;
				overflow: hidden;
			}

			.bgi {
				position: absolute;
				width: 2000px;
				height: 100%;
				z-index: -2;
				/* background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%); */
				background-image: linear-gradient(to right, #d7d2cc 0%, #304352 100%);
				animation: xt1 6s linear infinite alternate;

			}

			.logo {
				height: 200rpx;
				width: 200rpx;
				margin-top: 200rpx;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 50rpx;
			}

			.text-area {
				display: flex;
				justify-content: center;
			}

			.title {
				font-size: 36rpx;
				color: #8f8f94;
			}

			.text {
				position: relative;
				margin: 100px auto 0;
				padding: 20px 40px;
				font-size: 20px;
				height: 200px;
				color: #5d6a73;
				/* background: linear-gradient(to right, #f83600, #f9d423);
				-webkit-background-clip: text;
				color: transparent;
				-webkit-text-fill-color: transparent;
				text-fill-color: transparent; */
				/* background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); */
			}

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100%;
				z-index: -1;
				/* background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%); */

			}

			.main {
				width: 300px;
				height: 300px;
				margin: 70px auto 0;
				position: relative;
				animation: xt 5s linear infinite;
			}

			.head {
				width: 100px;
				/* height: 100px; */
				position: absolute;
				top: 40%;
				left: 50%;
				transform: translate(-50%, -50%);
				animation: xt2 5s linear infinite;
			}

			.l {
				width: 180px;
				height: 180px;
				background: #737c83;
				border-radius: 50%;
				position: absolute;
				left: 0px;
				top: 0px;
			}

			.r {
				width: 180px;
				height: 180px;
				background: #737c83;
				border-radius: 50%;
				position: absolute;
				top: 0px;
				right: 0px;
			}

			.z {
				width: 180px;
				height: 180px;
				background: #737c83;
				transform: translate(60px, 60px)rotate(45deg);
			}

			.btn {
				color: #fca96c;
				position: absolute;
				width: 100vw;
				text-align: center;
				opacity: 0;
				transition: all 5s; 
				
			}

			@keyframes xt {
				0% {
					transform: scale(1);
				}

				100% {
					transform: scale(1.2);
				}
			}

			@keyframes xt1 {
				0% {
					transform: translateX(0);
				}

				100% {
					transform: translateX(calc(100vw - 2000px));
				}
			}

			@keyframes xt2 {
				0% {
					opacity: 0;
				}

				100% {
					opacity: 1;
				}
			}
		</style>
	</head>
	<body>
		<div class="content">
			<audio src="./music/seeyouagain.mp3" id="Jaudio" class="media-audio" autoplay preload loop="loop"></audio>
			<div class="my-title1">
				这该死的压抑的生活
			</div>

			<div class="bgi">

			</div>

			<div class="text">
				<div id="fuck">

				</div>
				<div class="bg">

				</div>

			</div>
			<div class="btn">
				这寡独的黄昏，幕着雾和雨 </br>
				是向往，还是畏怯
			</div>
			<div class="main">
				<div class="l"></div>
				<div class="r"></div>
				<div class="z"></div>
				<image id="btn1" class="head" src="./4.png" mode=""></image>
			</div>

		</div>
		<script src="./json/data.js" type="text/javascript" charset="utf-8"></script>=
		<script type="text/javascript">
			let timer = null
			let el = document.getElementById('fuck')

			window.onload = function() {
				console.log(111);
				console.log(arr);
				let index = GetRandomNum(0, arr.length - 1)
				// $('#fuck').text(arr[index])
				go(arr[index])
				// getText()
			}

			// 获取随机数
			function GetRandomNum(Min, Max) {
				var Range = Max - Min;
				var Rand = Math.random();
				return (Min + Math.round(Rand * Range));
			}

			// 获取日记文本
			function getText() {
				// 定时器版
				// timer = setTimeout(function() {
				// 	console.log('12')
				// 	let index = GetRandomNum(0, arr.length - 1)

				// 	// $('#fuck').text(arr[index])
				// 	go(arr[index])
				// 	getText()
				// }, 99000)
				// 非定时器版

				let index = GetRandomNum(0, arr.length - 1)
				// $('#fuck').text(arr[index])
				go(arr[index])
				// getText()


			}

			// 跳转
			$('.btn').click(function() {
				console.log(2222);
				location.href = 'love.html'
			})

			// 自动播放音乐
			function audioAutoPlay(id) {
				var audio = document.getElementById(id);
				// audio.play();
				
				// document.addEventListener("WeixinJSBridgeReady", function() {
				// 	audio.play();
				// }, false);
				// document.addEventListener('YixinJSBridgeReady', function() {
				// 	audio.play();
				// }, false);

 
 
				play = function() {
					audio.play();
					document.removeEventListener("touchstart", play, false);
				};
				audio.play();
				document.addEventListener("WeixinJSBridgeReady", function() {
					play();
				}, false);
				document.addEventListener('YixinJSBridgeReady', function() {
					play();
				}, false);
				document.addEventListener("touchstart", play, false);


			}
			audioAutoPlay('Jaudio');

			// 封装打印机
			function go(str1) {
				let divTyping = document.getElementById('fuck')
				let i = 0,
					timer = 0,
					// str = str1
					str = '生而为人，却活成这样，除了对自己说声对不起，好像也没有别的办法'

				function typing() {
					if (i <= str.length) {
						divTyping.innerHTML = str.slice(0, i++) + '_'
						timer = setTimeout(typing, 300)
					} else {
						divTyping.innerHTML = str //结束打字,移除 _ 光标
						$('.btn').css('opacity', '1')
						clearTimeout(timer)
					}
				}

				typing()
			}
		</script>
		<iframe src = "./music/love.mp3" allow="autoplay" hidden />
	</body>

</html>
